<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue项目for循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                //定义变量el和data
                el: '.box',
                data: {
                    //01：普遍列表
                    itemList: [1, 2, 3, 4, 5],
                    //02：列表下标
                    indexList: ['a', 'b', 'c', 'd'],
                    //03：有且只有一个对象
                    objData: {
                        name: '小明',
                        age: 19
                    },
                    //04：对象列表
                    objList:[
                        {
                            name: '小明',
                            age:20
                        },
                        {
                            name:'小红',
                            age:21
                        }
                    ]
                }
            })
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li v-for="item in itemList">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in indexList">{{item}}---{{index}}</li>
    </ul>
    <ul>
        <li v-for="item in objData">{{item}}</li>
        <li v-for="(obj,key) in objData">{{obj}}---{{key}}</li>
    </ul>
    <ul>

        <li v-for="obj in objList">{{obj.name}}---{{obj.age}}</li>
    </ul>
</div>

</body>
</html>